<template>
  <div id="orders" :class="styleTypeClass" :style="{width,height:'100%'}">
    <!-- 默认样式-->
    <template>
      <div class="mt-3" style="height:95%">
        <EchartsIndex :options="options"/>
      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin/index'
import mixinEcharts  from '../mixin/echarts'
import * as echarts from 'echarts';

export default {
  name: "Users",
  mixins: [mixin,mixinEcharts],
  components: {},
  data(){
    return {
      series0Value:0,
      options:{
        grid: {
          left: "5%",
          //   right: "2%",
          bottom: "5%",
          top: "15%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 0.5 * 25
            }
          },
          axisLine: {
            lineStyle: {
              color: 'transparent',
              width: 2 //这里是为了突出显示加上的
            }
          }
        },
        tooltip: {
          show: true,
          trigger: 'item'
        },
        yAxis: [{
          type: 'value',
          // name: '立方米',
          min: 0,
          max: 25,
          axisLabel: {
            formatter: '{value}k',
            textStyle: {
              color: '#fff',
              fontSize: 0.5 * 25
            }
          },
          axisLine: {
            lineStyle: {
              color: 'transparent',
              width: 2 //这里是为了突出显示加上的
            }
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          name: '用户活跃度',
          type: 'line',
          stack: '总量',
          smooth: false,
          symbol: "circle",
          itemStyle: {
            normal: {
              color: '#34a39a',
              lineStyle: {
                color: "#34a39a",
                width: 2
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#08808b"
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,0,0,0.2)',
                  }
                ])
              }
            }
          },
          data: [18, 6, 8, 14, 5, 7, 16, 9, 22, 6, 18, 5, 16, 21, 24, 20, 5, 24, 9, 18, 13, 15, 18, 24, 17, 14, 13, 14, 10]
        },]
      }
    }
  },
  props:{
    //ele, val, con, max, color
    //'.shoeChart', 52563, '完成率', 65000, '#09c4ca'
    // w:{
    //   type: Number,
    //   default: 25
    // },
    // ele:{
    //   type: String,
    //   default: 'shoeChart'
    // },
    val:{
      type: Number,
      default: 52563
    },
    // con:{
    //   type: String,
    //   default: '完成率'
    // },
    // max:{
    //   type: Number,
    //   default: 65000
    // },
    // color:{
    //   type: String,
    //   default: '#09c4ca'
    // },
  },
  computed:{},
  methods: {
    valTest(){
      console.log('this.val === ',this.val)
      // this.series0Value = this.val;
      // console.log('this.series0Value === ',this.series0Value)
    },
  },
  watch:{
    dynamicData: {
      deep: true,
      handler() {
        this.valTest();
      }
    },

  },
}
</script>

<style lang="scss" scoped>
//@import '@/styles/datav/infoPlatform.scss';
</style>
